/**
 * 博客状态管理Store
 * @description 管理博客文章的状态，包括文章列表、当前文章、加载状态等
 * @author 系统开发团队
 * @version 1.0.0
 */

import { defineStore } from 'pinia'

// ==================== 类型定义 ====================

/**
 * 博客文章接口
 * @description 定义博客文章的数据结构
 */
interface Post {
    /** 文章唯一标识符 */
    id: string
    /** 文章标题 */
    title: string
    /** 文章摘要 */
    summary: string
    /** 文章内容 */
    content: string
    /** 文章封面图片URL */
    cover: string
    /** 创建时间 */
    createTime: string
    /** 文章标签数组 */
    tags: string[]
    /** 浏览次数 */
    views: number
}

// ==================== 博客Store定义 ====================

/**
 * 博客状态管理Store
 * @description 使用Pinia管理博客相关的状态，包括文章列表、当前文章、加载状态等
 * @example
 * // 在组件中使用
 * import { useBlogStore } from '@/stores'
 * 
 * const blogStore = useBlogStore()
 * await blogStore.fetchPosts()
 * console.log(blogStore.posts)
 */
export const useBlogStore = defineStore('blog', {
    /**
     * Store状态定义
     * @description 定义博客Store的响应式状态
     */
    state: () => ({
        /** 文章列表 */
        posts: [] as Post[],
        /** 当前选中的文章 */
        currentPost: null as Post | null,
        /** 加载状态 */
        loading: false,
        /** 错误信息 */
        error: null as any
    }),

    /**
     * Store操作方法
     * @description 定义博客Store的业务逻辑方法
     */
    actions: {
        /**
         * 获取文章列表
         * @description 从后端API获取博客文章列表，目前使用模拟数据
         * @returns {Promise<void>}
         * @example
         * await blogStore.fetchPosts()
         */
        async fetchPosts() {
            this.loading = true
            try {
                // TODO: 调用后端API获取文章列表
                // 模拟数据
                this.posts = [
                    {
                        id: '1',
                        title: '开始我的Vue3学习之旅',
                        summary: 'Vue3带来了许多激动人心的新特性，比如Composition API、更好的TypeScript支持等...',
                        content: '详细内容...',
                        cover: 'https://picsum.photos/800/400',
                        createTime: '2024-03-14',
                        tags: ['Vue3', 'JavaScript', '前端开发'],
                        views: 128
                    },
                    {
                        id: '2',
                        title: '使用Pinia进行状态管理',
                        summary: 'Pinia是Vue的新一代状态管理工具，相比Vuex具有更简洁的API和更好的开发体验...',
                        content: '详细内容...',
                        cover: 'https://picsum.photos/800/400?random=2',
                        createTime: '2024-03-13',
                        tags: ['Pinia', 'Vue3', '状态管理'],
                        views: 256
                    },
                    {
                        id: '3',
                        title: 'Element Plus 使用技巧',
                        summary: 'Element Plus是一个流行的Vue3 UI组件库，本文将分享一些实用的使用技巧...',
                        content: '详细内容...',
                        cover: 'https://picsum.photos/800/400?random=3',
                        createTime: '2024-03-12',
                        tags: ['Element Plus', 'UI设计', '组件库'],
                        views: 384
                    }
                ]
                this.loading = false
            } catch (error) {
                this.error = error
                this.loading = false
            }
        },

        /**
         * 根据ID获取文章详情
         * @description 根据文章ID获取指定文章的详细信息
         * @param {string} id 文章ID
         * @returns {Promise<void>}
         * @example
         * await blogStore.fetchPostById('1')
         * console.log(blogStore.currentPost)
         */
        async fetchPostById(id: string) {
            this.loading = true
            try {
                // TODO: 调用后端API获取指定文章详情
                this.currentPost = this.posts.find(post => post.id === id) || null
                this.loading = false
            } catch (error) {
                this.error = error
                this.loading = false
            }
        }
    }
}) 